<template>
<div class="note-example-box">
	<el-button @click='fnC1'>reactive 声明</el-button>
	{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}
	<div class="note-code-case">
		<textarea :value='codeVal' disabled style="height: 480px;"></textarea>
	</div>
</div>
</template>  
<script setup>
import { reactive, watch } from 'vue'

const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });

const fnC1 = () => {
	objC1.name1 = 'bb1';//变更有效
	objC1.age++;
	console.log('fnC1', 11);
};
watch(
    () => objC1.age,
    (newVal, oldVal) => {
        console.log("新值:", newVal, "老值:", oldVal);
    }
);
const codeVal = `<template>
<el-button @click='fnC1'>reactive 声明</el-button>
{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}
</template>

<script setup>
import { reactive, watch } from 'vue'

const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });

const fnC1 = () => {
	objC1.name1 = 'bb1';//变更有效
	objC1.age++;
	console.log('fnC1', 11);
};
watch(
    () => objC1.age,
    (newVal, oldVal) => {
        console.log("新值:", newVal, "老值:", oldVal);
    }
);
<script>`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>